<template>
	<view class=" flex flex-direction">
		<view class="flex justify-center margin-top" style="position: relative;">
			<!-- <image src="/static/dock.png" mode="widthFix"></image> -->
			<image class="animation" :src="img_src + 'sm.png'" mode=""></image>
			<image :src="img_src + 'rlsb.jpg'" mode="" style="height: 700rpx; width:100%;"></image>
		</view>
		<view class="text-center">
			<text class="text-gray">您即将进行</text>
			<br>
			<text class="text-bold margin-top-xs" style="font-size: 50rpx;">实名认证承诺</text>
		</view>
		<view class="flex flex-direction" style="position: fixed;bottom: 20rpx; left: 40rpx;width: 90%;">
			<checkbox-group class="block" @change="CheckboxChange">
				<view class="cu-form-group" style="padding: 0;">
					<checkbox class="margin-right-sm" aria-role="checkbox" :class="checkbox[0].checked?'checked':''" :checked="checkbox[0].checked?true:false" value="A"></checkbox>
					<view  aria-role="tab" class="text-black flex">
						我承诺，我所填写的残疾人信息为我本人真实信息!
					</view>
				</view>
			</checkbox-group>
			<view class="flex" >
				<button class="flex-sub cu-btn bg-white text-black margin-tb-sm lg margin-right-sm" style="border: 2rpx #DCDFE6 solid;">拒绝</button>
				<button class="flex-sub cu-btn bg-blue margin-tb-sm lg" @click="face_test">同意</button>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {  mapState } from 'vuex';
	export default {
		data() {
			return {
				img_src: this.$utils.SYS_URL + this.$utils.IMG_URL,
			}
		},
		computed:{
			...mapState(['users'])
		},
		methods: {
			face_test() {
				this.$request.postForm('/view/users/realn', {uid: this.users.uid, stateId: '1'}).then(
					res => {
						this.$utils.msg("人脸识别成功！");
						uni.navigateTo({url:'/pages_mine/users/uacid-view'});
					},
					err => {
						this.$utils.msg("人脸识别失败！")
					}
				);
			}
		}
	}
</script>

<style>
	page {
		padding-bottom: 120upx;
		background: #fff;
	}
	.animation{
		width: 100%;
		top:160rpx;
		z-index: 999;
		height:20rpx;
		position:absolute;
		animation:myfirst 12s linear 2s infinite alternate;
		/* Firefox: */
		-moz-animation:myfirst 12s linear 2s infinite alternate;
		/* Safari and Chrome: */
		-webkit-animation:myfirst 12s linear 2s infinite alternate;
		/* Opera: */
		-o-animation:myfirst 12s linear 2s infinite alternate;
	}
	
	@keyframes myfirst
	{
		0%   {left:0rpx; top:160rpx;}
		25%  {left:0rpx; top:440rpx;}
		50%  {left:0rpx; top:160rpx;}
		75%  {left:0rpx; top:440rpx;}
		100% {left:0rpx; top:160rpx;}
	}
</style>
